<template>
  <div class="wenan">
    <div class="wenantc">
      <img class="gb" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image/gb.png" alt="" @click="router.go(-1)">
      <div class="textBox" v-html="state.text"></div>
    </div>
    <div class="btnList">
      <img src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/jxyx.png" alt="" @click="goPlay">
      <img src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/zjschb.png" alt="" @click="chakanLookFun">
    </div>
    <div v-if="state.haibaoShow && state.sex === '1'" class="haibaonan">
      <div ref="targetDiv" class="shengcheng">
        <img class="haibao" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/yghbn.png" alt="">
        <div class="userData">
          <div class="dq">{{ Local.get('diqu').district }}</div>
          <div class="name">{{ Local.get('diqu').name }}</div>
        </div>
        <div class="textList" v-html="state.posterGirl"></div>
        <img class="xiangji" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image/xiangji.png" alt="">
        <img class="snapshotUrl" v-if="snapshotUrl !== ''" :src="snapshotUrl" alt="">
      </div>
      <img class="changan" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/shanganbaocun.png" alt="">
      <img class="fhsyD" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/fhsyD.png" alt="" @click="router.push({path:'/home'})">
      <img class="gbx" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image/gb.png" alt="" @click="state.haibaoShow = false">
    </div>
    <div v-if="state.haibaoShow && state.sex === '0'" class="haibaonv">
      <div ref="targetDiv" class="shengcheng">
        <img class="haibao" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/yghbnv.png" alt="">
        <div class="userData">
          <div class="dq">{{ Local.get('diqu').district }}</div>
          <div class="name">{{ Local.get('diqu').name }}</div>
        </div>
        <div class="textList" v-html="state.posterBoy"></div>
        <img class="xiangji" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image/xiangji.png" alt="">
        <img class="snapshotUrl" v-if="snapshotUrl !== ''" :src="snapshotUrl" alt="">
      </div>
      <img class="changan" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/shanganbaocun.png" alt="">
      <img class="fhsyD" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/fhsyD.png" alt="" @click="router.push({path:'/home'})">
      <img class="gbx" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image/gb.png" alt="" @click="state.haibaoShow = false">
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive,onMounted,ref } from 'vue'
import html2canvas from 'html2canvas';
import { useRouter } from 'vue-router'
const router = useRouter()
const targetDiv = ref()
const snapshotUrl = ref('')
import {Local,Session} from '../../utils/storage'
const state = reactive({
  haibaoShow:false,
  text:'',
  sex:'',
  token:'',
  posterBoy:'',
  posterGirl:''
})
const chakanLookFun = () =>{
  state.haibaoShow = true;
  setTimeout(()=>{
    captureSnapshot()
  },500)
}
// 截图函数
const captureSnapshot = async () => {
  console.log(targetDiv)
  // 使用 html2canvas 将 div 渲染为 Canvas
  const canvas = await html2canvas(targetDiv.value, {
    allowTaint: true, // 允许跨域图片
    useCORS: true, // 使用 CORS 加载图片
    scale: 2, // 提高截图分辨率
    width:targetDiv.value.clientWidth,
    height:targetDiv.value.clientHeight,
    backgroundColor:'transparent'
  });
  snapshotUrl.value = canvas.toDataURL('image/png');
  console.log(snapshotUrl.value)
};
const goPlay = () => {
  router.push({
    path:'/playIndex'
  })
}
onMounted(() =>{
  state.text = Local.get('userInfo').list.content_1.replace(/\n/g,'<br/>').replace(/\d+/g, (match:any) => {
    return `<span style="color: #ad61fa">${match}</span>`; // 将数字包裹在 span 标签中
  })
  state.posterBoy = Local.get('userInfo').list.poster_boy.replace(/\d+/g, (match:any) => {
    return `<span style="color: #ad61fa">${match}</span>`; // 将数字包裹在 span 标签中
  })
  state.posterGirl = Local.get('userInfo').list.poster_girl.replace(/\d+/g, (match:any) => {
    return `<span style="color: #ad61fa">${match}</span>`; // 将数字包裹在 span 标签中
  })
  state.sex = Local.get('sex')
  state.sex = Local.get('sex')
  state.token = Session.get('token')
})
</script>
<style scoped lang="scss">
.gbx{
  position: absolute;
  top: 10%;
  width: 40px;
  right: calc(5% + 3px);
}
.fhsyD{
  position: absolute;
  bottom: 20px;
  right: 20px;
  height: 25px;
}
.xiangji{
  position: absolute;
  width: 60px;
  top: 20%;
  right: -5px;
  z-index: 99999999;
}
.yf{
  position: absolute;
  width: 60px;
  bottom: 15%;
  left: 5px;
  z-index: 99999999;
}
.snapshotUrl{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.wenan{
  width: 100%;
  height: 100%;
  background: url("https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/ygBc.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-direction: column;
  .wenantc{
    margin-top: 40%;
    width: 350px;
    height: 350px;
    position: relative;
    background: url("https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/tc1.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    .xiangji{
      position: absolute;
      width: 60px;
      right: -25px;
      top: 90px;
    }
    .yfBox{
      position: absolute;
      width: 60px;
      bottom: -40px;
      left: -30px;
    }
    .gb{
      position: absolute;
      width: 40px;
      right: -15px;
      top: -15px;
    }
    .icon{
      width: 78%;
    }
    .textBox{
      position: absolute;
      z-index: 2;
      width: 90%;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 61%;
      color: #1a1a1a;
      line-height: 30px;
    }
  }
  .btnList{
    width: 60%;
    margin-top: 20px;
    img{
      width: 100%;
      margin-top: 8px;
    }
  }
  .haibaonan{
    position: absolute;
    z-index: 9999;
    //transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(26, 26, 26, 0.36);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .shengcheng{
      width: 90%;
      position: relative;
      .haibao{
        width: 100%;
      }
      .userData{
        display: flex;
        align-items: center;
        font-weight: bold;
        .dq{
          position: absolute;
          top: calc(67% - 2px);
          left: 50px;
          color: #1a1a1a;
        }
        .name{
          position: absolute;
          top: calc(67% - 2px);
          left: 135px;
          color: white;
        }
      }
      .textList{
        position: absolute;
        top: calc(84% - 8px);
        left: 79px;
        text-align: left;
        color: black;
        font-size: 14px;
      }
      .yinfu{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 20%;
      }
      .xiangji{
        position: absolute;
        top: 84px;
        right: 6px;
        width: 15%;
      }
    }
    .yinfu{
      position: absolute;
      bottom: 10px;
      left: 10px;
      width: 15%;
    }
  }
  .haibaonv{
    position: absolute;
    z-index: 999;
    //transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(26, 26, 26, 0.36);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .shengcheng{
      width: 90%;
      position: relative;
      .haibao{
        width: 100%;
      }
      .userData{
        display: flex;
        align-items: center;
        font-weight: bold;
        .dq{
          position: absolute;
          top: calc(67% - 8px);
          right: 115px;
          color: #1a1a1a;
        }
        .name{
          position: absolute;
          top: calc(67% - 8px);
          right: 40px;
          color: white;
        }
      }
      .textList{
        position: absolute;
        top: calc(84% - 12px);
        left: 79px;
        text-align: left;
        color: black;
        //font-size: 14px;
      }
      .yinfu{
        position: absolute;
        bottom: 10px;
        left: 10px;
        width: 15%;
      }
      .xiangji{
        position: absolute;
        top: 84px;
        right: 6px;
        width: 15%;
      }
    }

  }
  .changan{
    position: relative;
    top: -40px;
    width: 50%;
  }
}
</style>
